import React, {Component, lazy, Suspense} from 'react';
import {NavLink, Route} from 'react-router-dom';

// import About from './About/index';
// import Home from './Home/index';

// 引入加载方法
import Loading from './Loading';
// 懒加载路由组件
const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));


/* 
	路由的懒加载是指在加载路由组件时按需加载,而不是一下子全部加载完,
	同时Suspense标签的fallback需要使用正常引入而不能使用懒加载,因为这样将变得无组件可用
*/

export class App extends Component {
	render() {
		return (
			<div>
				<div className="row">
					<div className="col-xs-offset-2 col-xs-8">
						<div className="page-header">
							<h2>React Router Demo</h2>
						</div>
					</div>
				</div>

				<div className="row">
					<div className="col-xs-2 col-xs-offset-2">
						<div className="list-group">
							{/* 原生跳转使用a标签跳转不同页面 */}
							{/* <a className="list-group-item" href="./about.html">
								About
							</a>
							<a className="list-group-item active" href="./home.html">
								Home
							</a> */}

							{/* 路由跳转 */}
							<NavLink className="list-group-item" to="/about">
								About
							</NavLink>
							<NavLink className="list-group-item" to="/home">
								Home
							</NavLink>
						</div>
					</div>
					<div className="col-xs-6">
						<div className="panel">
							<div className="panel-body">
								<Suspense fallback={<Loading></Loading>}>
									<Route path="/about" component={About} />
									<Route path="/home" component={Home} />
								</Suspense>
							</div>
						</div>
					</div>
				</div>
			</div>
		);
	}
}

export default App;
